<template>
  <view class="content">
    <login v-if="is_login" v-on:x="to_login" v-on:plogin="to_login"></login>
    <view class="task-time">
      <viewTaskTime ref="viewTaskTime"></viewTaskTime>
    </view>
    <view class="friends-item">
      <view class="friends-user-info">
        <view class="user-img">
          <image :src="i.avatar"></image>
        </view>
        <view class="user-box">
          <view class="username">{{ i.nickName }}</view>
          <view class="user-badge">
            <daren :type="1" v-if="i.commentLevel>0" :index="i.commentLevel"></daren>
            <daren :type="2" v-if="i.shineLevel>0" :index="i.shineLevel"></daren>
          </view>
        </view>
      </view>
      <view class="message-box">
        <view class="text">
          <text style="word-break: break-all;">{{ i.content }}</text>
        </view>
        <view class="image-list" v-if="i.picUrl">
          <view class="image-item" v-for="(imageItem,imageIndex) in JSON.parse(i.picUrl)" :key="imageIndex"
                @click.stop="$refs.preview.init(imageIndex,JSON.parse(i.picUrl))" v-if="!imageItem.isHide">
            <image mode="aspectFill" v-if="imageItem.fileType==='image'" class="image" :src="imageItem.url"></image>
            <image mode="aspectFill" v-if="imageItem.fileType==='video'" class="image"
                   :src="imageItem.thumbUrl"></image>
            <view class="video-play" v-if="imageItem.fileType==='video'">
              <image :src="image_host+'icon_play.png'"></image>
            </view>
            <view class="image-template" v-if="imageItem.templateId>0">
              <image :src="image_host_template+'t'+imageItem.templateId+'.png'"></image>
            </view>
          </view>
        </view>
        <view class="date">{{ i.createTime }}</view>
        <view class="circle-title" v-if="i.topicTitle" @click.stop="toCircleDetail(i.topicId)">#{{ i.topicTitle }}
        </view>
        <view class="address" v-if="i.market">
          <view class="icon">
            <image :src="image_host+'icon_adress@2x.png'"></image>
          </view>
          <text>{{ i.market }}</text>
        </view>
      </view>
      <view class="buttons">
        <view class="button-item button-item-active" @click.stop="setTopicLike($event,i.id,i.likeFlag)">
          <image :src="image_host+(i.likeFlag?'dianzan1.png':'dianzan2.png')" mode="aspectFill"></image>
          <text>{{ $toNum(i.praiseNum || 0) }}支持</text>
        </view>
        <view class="button-item" v-if="!i.owerFlag" @click.stop="toMessage($event,i)">
          <image :src="image_host+'q_icon_pinglun@2x.png'" mode="aspectFill"></image>
          <text>{{ $toNum(i.commentNum || 0) }}评论</text>
        </view>
        <button class="button-item" open-type="share" @click.stop="setShare(i)">
          <image :src="image_host+'q_icon_fenxiang@2x(1).png'" mode="aspectFill"></image>
          <text>分享{{ $toNum(i.forwarding || 0) }}</text>
        </button>
      </view>
    </view>

    <view class="content-box">
      <!--      <view v-for="i in 100">1</view>-->
      <comment @setZhezhao="zhezhao=$event" type="detail" @setCommentNum="i.commentNum=$event" ref="comment"></comment>
    </view>
    <preview ref="preview" style="z-index: 100"></preview>
    <view class="zhezhao" v-if="zhezhao"></view>
  </view>
</template>

<script>
import daren from "@/pages/circle/components/daren.vue";
import Comment from "@/pages/circle/circleOfFriends/components/commentDetails.vue";
import preview from "@/pages/circle/components/preview.vue";
import viewTaskTime from "@/pages/circle/circleOfFriends/components/viewTaskTime.vue";
import {debounce} from '@/utils/util';

export default {
  components: {viewTaskTime, preview, Comment, daren},
  data() {
    return {
      i: {},
      image_host: this.image_host + 'quanzi/',
      image_host_template: this.image_host + 'template/',
      id: "",
      index: "",
      is_login: false,
      friendsInfo: "",
      zhezhao: false,
      commentId: "",
      isTask: true,
      tag: ""
    };
  },
  onLoad(e) {
    this.id = e.id
    this.index = e.index
    this.commentId = e.commentId
    this.tag = e.tag
    let isLogin = uni.getStorageSync('token') || false;
    if (!isLogin) {
      this.is_login = true
      return
    }
    let systemInfo = uni.getSystemInfoSync();
    let windowHeight = systemInfo.windowHeight;
    console.log(windowHeight); // 输出当前页面窗口的高度
    this.$refs.comment.show({id: e.id, windowHeight: windowHeight, commentId: e.commentId})
    this.getDetail();
    this.$refs.viewTaskTime.init()
  },
  methods: {
    to_login() {
      this.$refs.comment.show({id: this.id})
      this.getDetail();
    },
    async getDetail() {
      let res = await this.$javaCircle.doRequest("get", "circle/customer/say/saySomethingInfo", {
        id: this.id,
        tag: this.tag
      }, 'json', false);
      this.i = res.data.data
      if (!res.data.data) {
        uni.showModal({
          title: '该话题已被删除！', success() {
            uni.switchTab({url: '/pages/circle/index'})
          }
        })
      }
    },
    setShare(info) {
      this.friendsInfo = info
      if (info.picUrl) {
        let file = JSON.parse(info.picUrl)
        if (file.length === 0) {
          this.friendsInfo.thumb = ''
        } else {
          file = file[0]
          this.friendsInfo.thumb = file.fileType === 'image' ? file.url : file.thumbUrl
        }
      }
      this.i.forwarding++
      this.$javaCircle.doRequest("get", 'circle/customer/say/saySomethingShare', {id: info.id}, 'json', false)
    },
    async setTopicLike(e, id, likeFlag) {
      let url = likeFlag ? 'circle/customer/say/sayCancelLike?id=' + id : 'circle/customer/say/sayLike?id=' + id;
      let {data} = await this.$javaCircle.doRequest("get", url, {}, 'json', false)
      if (data.code === 0) {
        this.i.likeFlag = !likeFlag;
        this.i.praiseNum += !likeFlag ? 1 : -1;
      }
    },
    toCircleDetail(id) {
      uni.navigateTo({url: `/pages/circle/details/details?id=${id}`})
    },
    toMessage() {
      this.$refs.comment.setTextareaFocus()
    }
  },
  onUnload() {
    uni.$emit('setListSay', {index: this.index, info: this.i})
    if (uni.getStorageSync("taskId") === 100) {
      uni.$emit('continueFlagTask')
    }
    this.$refs.viewTaskTime.destroy()
  },
  onShareAppMessage(res) {
    return {
      title: this.friendsInfo.content,
      path: "/pages/circle/circleOfFriends/details?id=" + this.friendsInfo.id,
      imageUrl: this.friendsInfo.thumb || 'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/quanzi/shenImage.png'
    }
  },
  // 页面滚动到地步触发的方法
  onPageScroll: debounce(function (e) {
    if (e.scrollTop > 200) {
      this.$refs.comment.end()
    }
    // 刷新任务
    // 停止定时器
    clearTimeout(time);
    let time = setTimeout(() => {
      this.$refs.viewTaskTime.tempTime = 5
    }, 1000)
  }, 500)
}
</script>

<style lang="scss">
page {
  background-color: #fff;
  height: 100%;
  position: relative !important;
  top: 0 !important;
}

.content {
  width: 100%;
  //height: 100vh;
  background-color: #F3F5F8;
  //display: flex;
  //flex-direction: column;
  //overflow: auto;
}

.friends-item {
  width: 100%;
  margin-bottom: 24upx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30upx 24upx 0 24upx;
}

.friends-item .friends-user-info {
  width: 100%;
  height: 100upx;
  display: flex;
  align-items: center;

  .user-img {
    width: 100upx;
    height: 100upx;
    border-radius: 50%;
    background-color: #D8D8D8;
    position: relative;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .icon {
      width: 78upx;
      height: 70upx;
      position: absolute;
      bottom: -20upx;
      right: -20upx;
    }
  }

  .user-box {
    height: 100%;
    flex: 1;
    margin-left: 18upx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .username {
      font-size: 32upx;
      color: #666666;
    }

    .user-badge {
      display: flex;
    }
  }
}

.message-box {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20upx;
  border-bottom: 1upx solid #D8D8D8;
  margin-top: 8upx;

  .text {
    font-size: 44upx;
    color: #333333;
  }

  .image-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-count: 3;
    column-gap: 24upx;
    margin-top: 12upx;

    .image-item {
      width: 220upx;
      height: 220upx;
      background-color: #D8D8D8;
      border: 1upx solid #979797;
      margin-bottom: 20upx;
      position: relative;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .video-play {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;

      image {
        width: 62upx;
        height: 62upx;
      }
    }
  }

  .date {
    font-size: 28upx;
    color: #999999;
  }

  .circle-title {
    width: fit-content;
    background-color: #E0ECED;
    box-sizing: border-box;
    padding: 0 22upx;
    color: #333;
    font-size: 34upx;
    font-weight: 500;
    border-radius: 25upx;
    margin: 12upx 0;
  }

  .address {
    font-size: 36upx;
    color: #666666;
    display: flex;
    align-items: center;

    .icon {
      margin-right: 10upx;
      width: 26upx;
      height: 32upx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.buttons {
  width: 100%;
  height: 98upx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .button-item {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26upx;
    color: #666;

    image {
      width: 44upx;
      height: 44upx;
      margin-right: 4upx;
    }
  }
}

button {
  margin: 0;
  padding: 0;
  background-color: inherit;
  position: static;
}

button:after {
  content: none;
}

button::after {
  border: none;
}

.content-box {
  width: 100%;
  //height: 100vh;
  background-color: #fff;
}

.zhezhao {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 2;
}

.image-template {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;

  image {
    width: 100%;
    height: 100%;
  }
}

.task-time {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
}
</style>
